import nProgress from 'nprogress'
import {
	createWebHashHistory,
	createRouter,
	RouteRecordRaw,
} from 'vue-router'


declare module 'vue-router' {
	interface RouteMeta {
		description: string,
		parentRouteName: string,
		showInAside: boolean, //是否在侧边导航栏显示
		showInHeader: boolean //是否在顶部面包屑显示
	}
}
export const routes: readonly RouteRecordRaw[] = [
	{
		path: '/',
		name: 'Index',
		redirect: '/login',
		meta: {
			description: 'index',
			parentRouteName: "",
			showInAside: false,
			showInHeader: false
		}
	},
	{
		path: '/login',
		name: 'Login',
		component: () => import('../views/login.vue'),
		meta: {
			description: '登录页',
			parentRouteName: "",
			showInAside: false,
			showInHeader: false
		}
	},
	{
		path: '/home',
		name: 'Home',
		component: () => import('../views/blog/list.vue'),
		meta: {
			description: '首页',
			parentRouteName: "",
			showInAside: true,
			showInHeader: true
		}
	},
	{
		path: '/blog',
		name: 'Category',
		redirect:'/Blog/list',
		// component: () => import('../views/blog/list.vue'),
		meta: {
			description: '博客',
			parentRouteName: "",
			showInAside: true,
			showInHeader: true
		},
		children: [
			{
				path: 'list',
				name: 'List',
				component: () => import('../views/blog/list.vue'),
				meta: {
					description: '列表',
					parentRouteName: "Blog",
					showInAside: true,
					showInHeader: true
				}
			},
			{
				path: 'create',
				name: 'Create',
				component: () => import('../views/blog/create.vue'),
				meta: {
					description: '新建',
					parentRouteName: "Blog",
					showInAside: true,
					showInHeader: true
				}
			},
			{
				path: 'info/:path',
				name: 'Info',
				component: () => import('../views/blog/info.vue'),
				meta: {
					description: '详情',
					parentRouteName: "Blog",
					showInAside: false,
					showInHeader: true
				}
			},
			{
				path: 'edit/:path',
				name: 'Edit',
				component: () => import('../views/blog/edit.vue'),
				meta: {
					description: '编辑',
					parentRouteName: "Blog",
					showInAside: false,
					showInHeader: true
				}
			},
			{
				path: 'photo_wall',
				name: 'Photo_wall',
				component: () => import('../views/blog/Photo_wall.vue'),
				meta: {
					description: '相片墙',
					parentRouteName: "Blog",
					showInAside: true,
					showInHeader: true
				}
			},

		]
	},
	// 404
	{
		// path:'/:pathMatch(.*)*',
		path: '/:catchAll(.*)',
		name: '/404',
		component:()=>import('../views/err/404-1.vue'),
		meta: {
			description: '404',
			parentRouteName: "",
			showInAside: false,
			showInHeader: false
		}
	},

]
export const router = createRouter({
	history: createWebHashHistory(),
	routes
})


router.beforeEach((to, from) => {
	nProgress.start()
})

router.afterEach((to, from) => {
	nProgress.done()
})

// 在此处进行配置全局的路由守卫（全局前置钩子）
// 目的是：判断当前用户中本地存储是否有token，使用户在登录之前，只能访问到/login页面，其他的页面是访问不到的。
router.beforeEach((to, from, next) => {
	// to 即将进入的路由
	// from 在哪个路由进入的
	// next 放行
	console.log(to); //打印的是页面要跳转到的路由,例如：它下面的path：为"/login"
	console.log(from);
	let user = localStorage.getItem("user") || ""; //在本地存储中获取token
	if (user) {
		//判断是否有token
		next();
	} else {
		//在没有token的前提下，to下面的path是否为/login，如果不是则页面跳转到登录页面
		if (to.path == "/login") {
			next();
		} else {
			next({ path: "/login" }); //跳转页面到login页
		}
	}
});
